<template>
  <el-menu
      background-color="#FFF"
      text-color="#161940"
      :router="true"
      :default-active="$route.path"
      unique-opened
  >
    <el-sub-menu index="1">
      <template #title>
        <img class="menu-icon" src="/icon/netIcon.png">
        <span>{{ $t('menuStr.networkStr') }}</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/port">
          <div class="menu-1"></div>
          {{ $t('menuStr.interfacesStr') }}
        </el-menu-item>
        <el-menu-item index="/net-bridging">
          <div class="menu-2"></div>
          {{ $t('menuStr.ifaceBridgeStr') }}
        </el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
    <el-sub-menu index="2">
      <template #title>
        <img class="menu-icon" src="/icon/appIcon.png">
        <span>{{ $t('menuStr.applicationStr') }}</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/time-sync">
          <div class="menu-1"></div>
          {{ $t('menuStr.timeSynStr') }}
        </el-menu-item>
        <el-menu-item index="/ftp-set">
          <div class="menu-2"></div>
          {{ $t('menuStr.ftpSetStr') }}
        </el-menu-item>
        <el-menu-item index="/mail-alarm-set">
          <div class="menu-3"></div>
          {{ $t('menuStr.emailSetStr') }}
        </el-menu-item>
        <el-menu-item index="/snmp-set">
          <div class="menu-4"></div>
          {{ $t('menuStr.snmpSetStr') }}
        </el-menu-item>
        <el-menu-item index="/mac-set">
          <div class="menu-5"></div>
          {{ $t('menuStr.macFireWallStr') }}
        </el-menu-item>
        <el-menu-item index="/basic-alarm">
          <div class="menu-6"></div>
          {{ $t('menuStr.alarmBasicStr') }}
        </el-menu-item>
        <el-menu-item index="/power-alarm">
          <div class="menu-7"></div>
          {{ $t('menuStr.powerAlarmStr') }}
        </el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
    <el-sub-menu index="3">
      <template #title>
        <img class="menu-icon" src="/icon/userIcon.png">
        <span>{{ $t('menuStr.userStr') }}</span>
      </template>
      <el-menu-item-group>
        <el-menu-item v-permissionShow="permission.admin" index="/user-manage">
          <div class="menu-1"></div>
          {{ $t('menuStr.userManageStr') }}
        </el-menu-item>
        <el-menu-item index="/update-password">
          <div class="menu-2"></div>
          {{ $t('menuStr.modiPwdStr') }}
        </el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
    <el-sub-menu index="4">
      <template #title>
        <img class="menu-icon" src="/icon/serverIcon.png">
        <span>{{ $t('menuStr.serialServerStr') }}</span>
      </template>
      <el-menu-item-group>


        <el-menu-item index="/serial-interface/">
          {{ $t('menuStr.serialIfaceSetStr') }}
        </el-menu-item>

        <el-menu-item index="/state">
          <div class="menu-2"></div>
          {{ $t('menuStr.serialIfaceStr') }}
        </el-menu-item>
        <el-menu-item index="/extra-config">
          <div class="menu-3"></div>
          额外配置
        </el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
    <el-sub-menu index="5">
      <template #title>
        <img class="menu-icon" src="/icon/dataIcon.png">
        <span>{{ $t('menuStr.daStr') }}</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/protocol-config">
          <div class="menu-1"></div>
          {{ $t('menuStr.protocolOverViewStr') }}
        </el-menu-item>
        <el-menu-item index="/edps-upgrade">
          <div class="menu-2"></div>
          {{ $t('menuStr.edpsUpgradeStr') }}
        </el-menu-item>
        <el-menu-item index="/edps-auth">
          <div class="menu-3"></div>
          {{ $t('menuStr.edpsAuthorizationStr') }}
        </el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
    <el-sub-menu index="6">
      <template #title>
        <img class="menu-icon" src="/icon/systemIcon.png">
        <span>{{ $t('menuStr.systemStr') }}</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/log">
          <div class="menu-1"></div>
          {{ $t('menuStr.logStr') }}
        </el-menu-item>
        <el-menu-item v-permissionShow index="/backup">
          <div class="menu-2"></div>
          {{ $t('menuStr.backupRestoryStr') }}
        </el-menu-item>
        <el-menu-item v-permissionShow index="/upgrade">
          <div class="menu-3"></div>
          {{ $t('menuStr.upgradeStr') }}
        </el-menu-item>
        <el-menu-item v-permissionShow index="/system-reset">
          <div class="menu-4"></div>
          {{ $t('menuStr.resetStr') }}
        </el-menu-item>
        <el-menu-item v-permissionShow index="/reboot">
          <div class="menu-5"></div>
          {{ $t('menuStr.rebootStr') }}
        </el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
import permission from "@/utils/permission";
</script>

<style scoped>
.menu-icon {
  width: 14px;
  height: 14px;
  margin-right: 10px;
}

/*.menu-1 {*/
/*  width: 8px;*/
/*  height: 8px;*/
/*  background: #6696EF;*/
/*  border-radius: 50%;*/
/*  margin-right: 10px;*/
/*}*/

/*.menu-2 {*/
/*  width: 8px;*/
/*  height: 8px;*/
/*  background: #6FE2D9;*/
/*  border-radius: 50%;*/
/*  margin-right: 10px;*/
/*}*/

/*.menu-3 {*/
/*  width: 8px;*/
/*  height: 8px;*/
/*  background: #6FE27C;*/
/*  border-radius: 50%;*/
/*  margin-right: 10px;*/
/*}*/

/*.menu-4 {*/
/*  width: 8px;*/
/*  height: 8px;*/
/*  background: #E3D749;*/
/*  border-radius: 50%;*/
/*  margin-right: 10px;*/
/*}*/

/*.menu-5 {*/
/*  width: 8px;*/
/*  height: 8px;*/
/*  background: #E3B66F;*/
/*  border-radius: 50%;*/
/*  margin-right: 10px;*/
/*}*/

/*.menu-6 {*/
/*  width: 8px;*/
/*  height: 8px;*/
/*  background: #EA8567;*/
/*  border-radius: 50%;*/
/*  margin-right: 10px;*/
/*}*/

/*.menu-7 {*/
/*  width: 8px;*/
/*  height: 8px;*/
/*  background: #D97EE5;*/
/*  border-radius: 50%;*/
/*  margin-right: 10px;*/
/*}*/
</style>